<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Agregar Región</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/spacelab.css" %}">
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/responsive.css" %}">
	{% load staticfiles %} <link rel="stylesheet" href="{% static "css/misestilos.css" %}"> 
	        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/menu_jquery.css" %}">
</head>
<body>

	{% include "topmenu.html" %} <!-- Top menu -->

	<div class="container">
		<div class="row-fluid">
			
			{% include "sidebar.html" %} <!-- Side bar -->

			<!-- Listado de universidades divididas por regiones -->
			<div class="span9">
				{% if show_message_success %}
	                <div class="alert alert-success">
						<button type="button" class="close" data-dismiss="alert">&times;</button>
						{{mensaje_exito|safe}}                
	                </div>
	            {% endif %}
	            {% if show_message_error %}
	            	<div class="alert alert-error">
						<button type="button" class="close" data-dismiss="alert">&times;</button>
						{{mensaje_error|safe}}                
	                </div>
	            {% endif %}
				
				<!-- Universidades participantes agrupadas por region -->
				<div class="page-header">
					<h1>Agregar Region</h1>
				</div>
				<small><b>Campos con (*) son de caracter obligatorio para el registro.</b></small>

				<form action="/plataforma/universidades/agregar_region/" method="post" name="registro"> 
					<div class="form-horizontal well">
						<div class="control-group">
							<label for="nombre" class="control-label"><b>Nombre*</b></label>
							<div class="controls">
								<input type="text" name="nameRegion" id = "nameRegion" disabled  class="textarea_agregar_region">
								<input type="hidden" name="name" id = "name">
								<div class="nameAlert"></div>
							</div>
						</div> <!-- Nombre -->

						<div class="control-group">
                                <!-- Pais -->
                                <label for="pais" class="control-label"><b>País*</b></label>
                                <div class="controls">
                                    <select name="pais" id = "pais" onBlur="javascript:message_paises(event)" onclick="cargarNombreRegion()" class="selectarea_agregar_pais_region">
                                        <option value="">| Elije un país |</option>
                                        {% for nombre, codigo in lista_sinc_paises %}
                                        <option value="{{ nombre }}">{{ codigo }}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="paisAlert"></div>
                                </div>
                        </div><!-- /Pais -->

						<div class="control-group">
							<label for="administrador" class="control-label"><b>Administrador*</b></label>
							<div class="controls">
								<select name="administrador" id = "administrador" onBlur="javascript:message_administrador(event)" class="selectarea_agregar_region">
									<option value="">| Elije un administrador |</option>
									{% for id_user, nombre_user in usuarios %}	
										<option value="{{id_user}}">{{nombre_user}}</option>		
									{%endfor%}
								</select>
								<div class="adminAlert"></div>
						</div> <!-- Administrador -->

							{% csrf_token %}
						</div>

						<div class="form-actions" align="center">
							<button type="submit" class="btn btn-primary" onClick="javascript:myfunc(event)">Guardar</button>
						</div> <!-- Botones de opciones -->
					</div>
				</form> <!-- form -->
			</div>
		</div> <!-- /row -->

	{% include "footer.html" %} <!-- Footer -->
</div> <!-- /container -->

	<!-- JS files -->
	{% load staticfiles %} <script type="text/javascript" src="{% static "js/jquery.js" %}"></script>
	{% load staticfiles %} <script type="text/javascript" src="{% static "js/bootstrap.js" %}"></script>
	{% load staticfiles %} <script type="text/javascript" src="{% static "js/menu_jquery.js" %}"></script>
	<script>

	function message_administrador(){
		if ($("#administrador").val() == ""){
		 	$(".adminAlert").html("<div class='alert alert-error'>Seleccione un administrador para la región. Si no existe, debe crearlo.</div>");
		 }else{
		 	$(".adminAlert").html("");
		 }
	}
	//***********************
	/*$("#nameRegion").blur(function(){
		if($("#nameRegion").val() != ""){
			$(".nameAlert").html("");
		}
	});*/

	//***********************
	function cargarNombreRegion(){
		var valor = $("#pais option:selected").html();
		if (valor == "| Elije un país |"){
            $("#nameRegion").val("");
            $("#name").val("");
        }else{
            $("#nameRegion").val(valor);
            $("#name").val(valor);
        } 
	}
	//***********************
	function myfunc(event){
		if ($("#administrador").val() == "" ){
	 		$(".adminAlert").html("<div class='alert alert-error'>Seleccione un administrador para la región. Si no existe, debe crearlo.</div>");
	 		event.preventDefault();
	 	}
	 	if ($("#pais").val() == ""){
		 	$(".paisAlert").html("<div class='alert alert-error'>Seleccione un país.</div>");
		 	event.preventDefault();
		 }
	}

	function message_paises() {
        if ($("#pais").val() == "") {
            $(".paisAlert").html("<div class='alert alert-error'>Seleccione un país.</div>");
        } else {
            $(".paisAlert").html("");
        }
    }	
	</script>
</body>
</html>